<template>
  <div class="wutong-pool">
    <div class="header-intro">
      <div class="intro">
        <div class="dv-left">
            <div class="cname">{{companyName}}</div>
            <div class="phone">联系电话：{{phone1}}</div>
        </div>
        <div class="dv-right">
            <img class="add" src="@/assets/images/add.png" alt="">
            <span class="addinfo" @click="addInfo">新增信息</span>
        </div>
        <van-dialog v-model:show="showAddtk" title="新增信息" show-cancel-button>
          <div class="addry1" @click="jump({ path: '/TalentAdd' })">新增人员信息</div>
          <div class="addry" @click="jump({ path: '/ProjectAdd' })">新增项目信息</div>
        </van-dialog>
      </div>
      <div class="address">公司地址：{{jurisdiction}} </div>
    </div>
    <van-tabs v-model:active="active">
        <van-tab title="公司信息">
          <div class="list-box">
            <List :finished="finished" @loadData="fetchData" @reFresh="reFetchData">
              <CompanyItem v-for="item of companyTotalList" :key="item" :item="item" @jump="jump({ path: '/CompanyDetail', query: { companyId: item.companyId } })"></CompanyItem>
            </List>
          </div>
        </van-tab>
        <van-tab title="人才信息">
          <talent-info />
        </van-tab>
        <van-tab title="项目信息">
          <project-info />
        </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, watch, toRefs, onMounted } from 'vue';
import { getCompanyList } from '@/api/company.js';
import { useRouter,useRoute } from 'vue-router';
const active = ref(0);
const route = useRoute();
const showAddtk = ref(false);

var statusActive = route.query.status || '';

if(statusActive == 0){
  active.value = 0
}else if(statusActive == 1){
  active.value = 1
} else if(statusActive == 2){
  active.value = 2
}

const addInfo =() =>{
  showAddtk.value = true;
}

const router = new useRouter();
//  页面跳转
const jump = (options) => {
  router.push(options);
}


const page = ref({
  currentPage: 1,
  pageSize: 20,
});

const companyTotalList = ref([]);
const finished = ref(false);

//  下拉刷新
const reFetchData = () => {
  page.value.currentPage = 1;
  finished.value = false;
  companyTotalList.value = []
  debounce(fetchData, 800)();
}

//  防抖
function debounce(func, delay) {
   let timeout
   return function () {
       const _this = this
       const args = [...arguments]
       if (timeout) {
           clearTimeout(timeout)
       }
       timeout = setTimeout(() => {
           func.apply(_this, args)
       }, delay)
   }
}

onMounted(() => {
  fetchData()
})

//  请求数据
const companyList = ref({})
const companyName = ref('')
const phone1 = ref('')
// const companyStatus = ref('')
const jurisdiction = ref('')

async function fetchData() {
  if (finished.value) return;
  const { code, data, msg } = await getCompanyList(page.value);
  if (code == 200) {
    companyList.value = data.list[0];
    companyName.value = companyList.value.companyName
    phone1.value = companyList.value.phone1
    // companyStatus.value = companyList.value.companyStatus
    jurisdiction.value = companyList.value.jurisdiction
    const { currentPage, pageSize, total } = data.pagination;
    // 判断是否到底
    if (currentPage * pageSize >= total) {
      finished.value = true;
    }
    companyTotalList.value = data.list;
    //  准备加载新的数据
    page.value.currentPage++;
  }else{
    showToast(msg)
  }
}

</script>

<style lang="scss" scoped>
.wutong-pool {
  box-sizing: border-box;
  height: 100%;
  background: #FAFAFC;

  .header-intro{
    background: #fff;
    padding: 2rem;
    border-top: 1px solid #F2F2F4;
    margin-bottom: 1.2rem;

    .intro{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      .dv-left{

          .cname{
              font-size: 1.8rem;
              font-weight: 600;
              color: #333333;
              font-family: '微软雅黑';
          }
          .phone{
              font-size: 14px;
              font-weight: 400;
              margin-top: 1rem;
              color: #666666;
          }
      }
      .dv-right{
          width: 8.5rem;
          height: 3.3rem;
          background: #1052CC;
          align-items: center;
          display: flex;
          justify-content: space-around;
          font-size: 1.4rem;
          font-weight: 400;
          color: #fff;

          .add{
              width: 1.4rem;
          }
      }
      .addry,.addry1{
        width: 27.6rem;
        height: 4.7rem;
        line-height: 4.7rem;
        border-radius: 5px;
        border: 1px solid #E5E5E5;
        text-align: center;
        margin: 0 auto 1.5rem;
      }
      .addry1{
        margin-top: 3rem;
        margin-bottom: 1rem;
      }
    }
    .address{
        font-size: 14px;
        font-weight: 400;
        margin-top: 1rem;
        color: #666666;
    }
  }
}

</style>